<template>
	<view class="container">
		<steps 
			typeCode="JiaBanZheXian" 
			apiname="getPermitExtraDiscount" 
			:apiparam="apiparam" 
			:brief="brief" 
			:notEmpty="true"
			:disabled="disabled"
			:checkResult="checkResult"
			:insflowid="insflowid"
			@confirm="confirm">
			<view class="container__left-hour">
				<text>剩余小时：</text>
				<text style="color: #E04B28;">{{leftHours}}</text>
			</view>
			<view class="container__list" style="padding: 10rpx 20rpx;margin-top: 0;">
				<view class="container__list--text">
					<text class="container__list--text-symbol">*</text>
					<text class="container__list--text-des">折现小时</text>
				</view>
				<view class="container__list--textarea">
					<input type="number" v-model="hours" @blur="checkHours"/>
				</view>
			</view>
			<view class="container__list" style="padding: 10rpx 20rpx;">
				<view class="container__list--text">
					<text class="container__list--text-des">折现理由</text>
				</view>
				<view class="container__list--textarea">
					<input type="text" v-model="content" placeholder="请输入" placeholder-style="font-size: 27rpx;color: #aaa;" />
				</view>
			</view>
		</steps>
	</view>
</template>

<script>
	import Steps from '@/pages/home/child/add-attend-apply/components/steps.vue'
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import moment from 'moment'
	
	export default {
		components: {
			Steps,
		},
		data() {
			return {
				obsusername: _data.localData('name'),
				user: _data.data('user_info'),
				pxid: _data.localData('userid'),
				content: '',
				hours: 0,
				leftHours: 0,
				disabled: true,
				checkResult: '',
				insflowid: ''
			}
		},
		onLoad(options) {
			if(options.data) {
				this.data = JSON.parse(options.data)
				this.insflowid = options.insflowid;
				this.hours = this.data.DiscountHours;
				this.content = this.data.Reason;
				this.checkForm();
			}
			console.log(this.data)
		},
		onShow() {
			this.getUserLeftExtraHours()
		},
		computed: {
			brief() {
				return '折现小时：' + this.hours
			},
			apiparam() {
				return {
					obsusername: this.obsusername,
					pxid: this.pxid,
					discounthours: this.hours
				}
			}
		},
		methods: {
			/**
			 * 校验输入的总时长
			 * @param {Object} apiparam
			 */
			checkHours(e) {
				this.hours = e.detail.value;
				this.checkForm()
			},
			/**
			 * 表单校验
			 */
			checkForm() {
				let decimal = this.hours.split('.');
				let decimalLength = decimal.length > 1 ? decimal[1].length : 0;
				if(this.hours*1 <= 0) {
					this.disabled = true;
					this.checkResult = '折现小时必须为正数'
				} else if(decimalLength > 1) {
					this.disabled = true;
					this.checkResult = '不能超过1位小数';
				} else {
					this.disabled = false;
				}
			},
			/**
			 * 添加加班折现申请
			 * @param {Object} apiparam  接口参数
			 */
			extraDiscountApply(apiparam) {
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'extraDiscountApply',
						code: 3,
						apiparam,
						success(res) {
							resolve()
						}
					})
				})
			},
			/**
			 * 触发流程环节通知
			 */
			trigFlowStepNotice(apiparam) {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'trigFlowStepNotice',
						code: 2,
						apiparam,
						success() {
							resolve()
						}
					})
				})
			},
			/**
			 * 点击提交按钮申请流程后的回调
			 * @param {Object} v 回调参数
			 */
			confirm(v) {
				this.extraDiscountApply({
					obsusername: this.obsusername,
					pxid: this.pxid,
					insflowid: v.insflowid,
					reason: this.content,
					discounthours: this.hours,
				}).then(() => {
					uni.showToast({
						title: '流程创建成功',
						icon: 'none'
					})
					this.trigFlowStepNotice({
						insflowid: v.insflowid,
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/home/child/extra-discount/index?data=' + JSON.stringify(v)
						})
					},500)
				})
			},
			/**
			 * 跳转选人页面
			 */
			goSelectUserPage() {
				uni.navigateTo({
					url: '/pages/wait/add/select?type=extra'
				})
			},
			/**
			 * 获取用户本年加班时间剩余数量
			 */
			getUserLeftExtraHours() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getUserLeftExtraHours',
						apiparam: {
							obsusername: this.obsusername,
							pxid: this.pxid
						},
						success(res) {
							if(res.length) {
								that.leftHours = res[0].LeftHours
							}
						}
					})
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		overflow-x: hidden;
		padding-bottom: 90rpx;
		
		&__left-hour {
			height: 60rpx;
			font-size: 28rpx;
			line-height: 60rpx;
			padding-left: 20rpx;
		}
		
		&__list {
			background-color: #fff;
			margin-top: 30rpx;
			position: relative;
			
			&--text {
				
				&-symbol {
					color: red;
					margin: 0 5rpx;
				}
				
				&-des {
					font-size: 30rpx;
				}
				
			}
			
			&--time {
				font-size: 32rpx;
				color: #aaa;
				margin-left: 20rpx;
				position: relative;
				height: 60rpx;
			}
			
			&--textarea {
				margin-left: 20rpx;
				font-size: 32rpx;
			}
			
			&--icon {
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				z-index: 9;
			}
			
			&--value {
				display: flex;
				
				&-user {
					margin-right: 20rpx;
				}
			}
		}
		
		&__detail {
			
			&--title {
				font-size: 27rpx;
				line-height: 60rpx;
				padding-left: 20rpx;
			}
			
			&--head,&--item {
				margin: 0 40rpx;
				margin-bottom: 20rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				border-radius: 5rpx;
				height: 80rpx;
				
				view {
					flex: 1;
					padding-left: 20rpx;
					font-size: 27rpx;
					
					&:first-child {
						border-right: 1rpx solid #eee;
					}
				}
			}
			
			&--item {
				color: #aaa;
				
			}
		}
		
	}
	
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
	}
	
	.hover {
		padding: 10rpx 20rpx;
	}
</style>
